import React from 'react';
import Swiper from 'swiper/bundle';
import {lazyImg, setScrollTop} from '../../assets/js/utils';
import Css from '../../assets/css/nj/index.css';

function hoc(WithComponent) {
    return class hocComponent extends React.Component{
        constructor(){
            super();
            this.state={

            }
            this.groupSwiper='';
            this.CusSwiper='';
            this.CusSwiper2='';
        }
        componentDidMount(){
            setTimeout(()=>{
                this.echo();
                this.njGroupSwiper();
                this.njCusSwiper();
                this.njCusSwiper2()
            },400)
        }
        njGroupSwiper(){
            this.groupSwiper= new Swiper('.nj_swiper_seed', {
                slidesPerView: 4,
                spaceBetween: 10,
                autoplay:true,
                pagination: {
                    el: '.nj_swiper_seed_pagination',
                    clickable: true,
                    bulletClass : Css['my-bullet'],
                    bulletActiveClass: Css['my-bullet-active'],
                },
                loop:true,
                lazy: {
                    preloaderClass: Css['activeLoading'],
                },
            });
        }
        njCusSwiper(){
            this.CusSwiper = new Swiper('#gallery',{
                direction : 'vertical',
                slidesPerView: 1,
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                autoplay: {
                    delay: 10000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                allowTouchMove: false,
                thumbs: {
                    swiper: {
                        direction : 'vertical',
                        el: '#thumbs',
                        spaceBetween: 0,
                        slidesPerView: 4,
                        watchSlidesVisibility: true,
                        allowSlideNext : false,
                        allowSlidePrev : false,
                    },
                    slideThumbActiveClass: Css['nj_swiper_cus_small_active'],
                },
                lazy: {
                    preloaderClass: Css['activeLoading'],
                    loadPrevNext: true,
                },
            })

        }
        njCusSwiper2(){
            this.CusSwiper2 = new Swiper('#nj_swiper_cus_big', {
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                pagination: {
                    el: '.nj_swiper_cus_big_pagination',
                    clickable: true,
                    bulletClass : Css['nj_swiper_cus_small_bullet'],
                    bulletActiveClass: Css['nj_swiper_cus_small_bullet_active'],
                },

            });
            for(let i=0;i<this.CusSwiper2[0].pagination.bullets.length;i++){
                let nub=i;
                this.CusSwiper2[0].pagination.bullets[i].onmouseover=()=>{
                    this.CusSwiper2[0].slideTo(nub);
                };
            }
        }
        onMouseEnter(index){
            this.CusSwiper.slideTo(index,1000,false);
        }
        //懒加载
        echo(){
            lazyImg()
        }
        //点击跳转页面
        goPages(url){
            let strUrl = "^(://)" +
                "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" +//ftp的user@+
                "(([0-9]{1,3}.){3}[0-9]{1,3}" +// IP形式的URL- 199.194.52.184 +
                "|" +// 允许IP和DOMAIN（域名） +
                "([0-9a-z_!~*'()-]+.)*" +// 域名- www. +
                "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." +// 二级域名 +
                "[a-z]{0,6})" +// first level domain- .com or .museum +
                "(:[0-9]{1,4})?" +// 端口- :80 +
                "((/?)|"  +// a slash isn't required if there is no file name +
                "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";

            let reg = new RegExp(strUrl);
            if (!reg.test(url)){
                window.open(url)
            }else {
                this.props.history.push(window.base.config.path+url)
            }
        }
        //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
        componentWillUnmount(){
            this.groupSwiper='';
            this.CusSwiper='';
            this.CusSwiper2='';
            window.removeEventListener('scroll',setScrollTop());
            this.setState=(state,callback)=>{
                return;
            }
        }

        render(){
            let newProps={
                onMouseEnter:this.onMouseEnter.bind(this),
                goPages:this.goPages.bind(this)
            }
            return(
                <WithComponent {...this.props} {...newProps}></WithComponent>
            )
        }
    }
}

export default hoc